<template>
  <div class="bigbox">
    <div class="topbox">
      <div class="libox">
        <ul>
          <li><i class="a-icon-back" @click="$router.go(-1)">返回</i></li>
          <li>添加企业</li>
        </ul>
      </div>
      <span>黑马管理员</span>
    </div>
    <div class="centerbox">
      <a-card style="box-shadow: none">
        <div class="qiyexinix">企业信息</div>
        <div class="formbox">
          <a-form layout="horizontal">
            <a-row :gutter="24">
              <a-col :span="11" style="margin-right: 20px">
                <a-form-item label="企业名称" label-width="100px">
                  {{ params.name }}
                </a-form-item>
              </a-col>
              <a-col :span="11" style="margin-right: 20px">
                <a-form-item label="法人" label-width="100px">
                  {{ params.legalPerson }}
                </a-form-item>
              </a-col>
              <a-col :span="11" style="margin-right: 20px">
                <a-form-item label="注册地址" label-width="100px">
                  {{ params.registeredAddress }}
                </a-form-item>
              </a-col>
              <a-col :span="11" style="margin-right: 20px">
                <a-form-item label="所在行业" label-width="100px">
                  {{ params.industryName }}
                </a-form-item>
              </a-col>
              <a-col :span="11" style="margin-right: 20px">
                <a-form-item label="营业执照" label-width="100px">
                  <div class="imgbox">
                    <img :src="params.businessLicenseUrl" alt="" />
                  </div>
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
        </div>
      </a-card>

      <a-card style="box-shadow: none; margin: 20px 0">
        <div class="qiyexinix">联系人信息</div>
        <div class="formbox">
          <a-form>
            <a-row :gutter="24">
              <a-col :span="11" style="margin-right: 20px">
                <a-form-item label="企业联系人" label-width="100px">
                  {{ params.contact }}
                </a-form-item>
              </a-col>
              <a-col :span="11" style="margin-right: 20px">
                <a-form-item label="联系电话" label-width="100px">
                  {{ params.contactNumber }}
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
        </div>
      </a-card>

      <a-card v-if="params.rent?.length > 0" style="box-shadow: none; margin: 20px 0">
        <div class="qiyexinix">租赁记录</div>
        <div class="formbox">
          <a-table
            width="60px"
            :pagination="false"
            :columns="incolumn"
            :dataSource="params.rent"
            :rowKey="(item) => item.id"
          >
            <template #bodyCell="{ record, column }">
              <template v-if="column.dataIndex === 'timer'">
                {{ record.startTime }}至{{ record.endTime }}
              </template>
              <template v-if="column.dataIndex === 'contractName'">
                <a-button type="link" @click="jumplink(record.contractUrl)">
                  {{ record.contractName }}</a-button
                >
              </template>

              <template v-if="column.dataIndex === 'status'">
                <div
                  :class="{
                    active1: record.status === 0,
                    active2: record.status === 1,
                    active3: record.status === 2,
                    active4: record.status === 3
                  }"
                >
                  {{
                    record.status === 0
                      ? '待生效'
                      : record.status === 1
                      ? '生效中'
                      : record.status === 2
                      ? '已到期'
                      : record.status === 3
                      ? '已退租'
                      : ''
                  }}
                </div>
              </template>
              <template v-if="column.dataIndex === 'inopera'">
                <a-button type="link" @click="doamloadodcument(record)">合同下载</a-button>
              </template>
            </template>
          </a-table>
        </div>
      </a-card>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { getEnterpById, downdoc } from '@/api/businessman.js'
import { saveAs } from 'file-saver'
///////////////////////////////////////////////
/////////////////这里写属性/////////////////////
///////////////////////////////////////////////
const params = ref({
  businessLicenseId: null,
  businessLicenseUrl: '',
  contact: '',
  contactNumber: '',
  industryCode: null,
  legalPerson: '',
  name: '',
  registeredAddress: ''
})
const route = useRoute()
/////////////////////////////////////////////////
////////////////////这下面写方法//////////////////
/////////////////////////////////////////////////

onMounted(() => {
  getEnterpInfo()
})
const jumplink = (src) => {
  location.href = `https://view.officeapps.live.com/op/view.aspx?src=${src}`
}
const getEnterpInfo = async () => {
  const res = await getEnterpById(route.params.id)
  console.log(res)
  if (res.data.rent.length > 0) {
    res.data.rent.forEach((el, index) => {
      el.index = index + 1
    })
  }
  params.value = { ...res.data }
  console.log(params)
}
const doamloadodcument = async (row) => {
  const res = await downdoc(row.contractId)
  console.log(res)
  saveAs(res, row.contractName)
}

const incolumn = [
  {
    title: '序号',
    dataIndex: 'index',
    width: '30px'
  },
  {
    title: '租赁楼宇',
    dataIndex: 'name',
    width: '60px'
  },
  {
    title: '租赁起止时间',
    dataIndex: 'timer',
    width: '120px'
  },
  {
    title: '租赁合同',
    dataIndex: 'contractName',
    key: 'contractName',
    width: '150px'
  },
  {
    title: '录入时间',
    dataIndex: 'createTime',
    key: 'createTime',
    width: '120px'
  },
  {
    title: '操作',
    dataIndex: 'inopera',
    key: 'inopera',
    width: '90px'
  }
]
</script>

<style scoped lang="less">
::v-deep .ant-form-item-label > label {
  color: #9e9399; /* 设置字体颜色为红色 */
}
.imgbox {
  width: 320px;
  height: 200px;
  img {
    width: 100%;
  }
}
.bigbox {
  height: 100vh;
  width: 100vw;
  background-color: #f4f6f8;
}
.topbox {
  width: 100vw;
  height: 50px;
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
}
ul,
li {
  list-style: none;
  margin: 0px;
  padding: 0px;
  color: #262626;
}
ul {
  display: flex;
}
li:first-child {
  padding-right: 10px;
  border-right: 1px solid #d8d8d8;
  // background-color: pink;
}
li:last-child {
  margin-left: 10px;
}
.centerbox {
  margin: 20px auto;
  width: 85vw;
}
.a-card {
  margin: 30px 0;
}
.qiyexinix {
  margin-top: 20px;
  margin-bottom: 40px;
  padding-left: 10px;
  border-left: 2px solid #4770ff;
}
::v-deep .a-card__body {
  padding: 0px;
}
.formbox {
  margin: 0px auto;
  width: 70vw;
  // height: 50vh;
  background-color: #fff;
  margin-bottom: 40px;
}
.a-upload__tip {
  margin-top: 5px;
  color: #8c8c8c;
}
.buttombox {
  width: 100%;
  height: 10vh;
  position: fixed;
  bottom: 0;
}

.active1 {
  width: 50px;
  height: 20px;
  text-align: center;
  line-height: 20px;
  font-size: 12px;
  border: 1px solid #006ce3;
  background-color: #e5effa;
  color: #006ce3;
}
.active2 {
  width: 50px;
  height: 20px;
  text-align: center;
  line-height: 20px;
  font-size: 12px;
  border: 1px solid #209e44;
  background-color: #ebf7ee;
  color: #209e44;
}
.active3 {
  width: 50px;
  height: 20px;
  text-align: center;
  line-height: 20px;
  font-size: 12px;
  border: 1px solid #e12a19;
  background-color: #fcedea;
  color: #e12a19;
}
.active4 {
  width: 50px;
  height: 20px;
  text-align: center;
  line-height: 20px;
  font-size: 12px;
  border: 1px solid #d9d9d9;
  background-color: #fafafa;
  color: #333;
}
</style>
